<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品应用</title>
		<script src="js/layui/layui.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" />
		<link rel="stylesheet" href="css/main.css" />
		<script type="text/javascript" src="js/AppSetting.js"></script>
		<style>
			.case {
				margin: 1rem 14rem;
			}
			
			.model-case {
				display: flex;
				justify-content: space-between
			}
			
			.white {
				background-color: #fff;
			}
			
			.gray {
				background-color: #c2c2c2;
			}
			
			.case-left {
				padding: 1rem 6rem;
				line-height: 1.5rem;
			}
			
			.case-left span {
				display: flex;
				font-family: '楷体';
				font-size: 1.5rem;
				font-weight: bold;
				padding: 1rem;
			}
			
			.case-left p {
				padding: 0 1rem;
				text-indent: 2rem;
				color: #4E5465;
			}
			
			.case-right {
				display: flex;
				align-items: center;
			}
			
			.case-right img {
				height: 14rem;
			}
		</style>
	</head>

	<body>
		<div class="page">
			<!--
            	作者：offline
            	时间：2018-02-01
            	描述：模块头
            -->
			<div class="model-title">
				<div class="title-label">
					<label>产品应用</label>
				</div>
			</div>
			<!--
            	作者：offline
            	时间：2018-02-01
            	描述：产品应用
            -->
			<div class="case" id="DataList">
				<!--<div class="model-case white">
            		<div class="case-left">
            			<span>产品应用</span>
            			<p>客户介绍多久客户介绍多久啊开发的撒法即刻客户介绍多久啊开发的撒法即刻客户介绍多久啊开发的撒法即刻客户介绍多久啊开发的撒法即刻客户介绍多久啊开发的撒法即刻啊开发的撒法即刻</p>
            		</div>
            		<div class="case-right">
            			<img src="img/1.jpg" />
            		</div>
            	</div>
            	<div class="model-case gray">
            		<div class="case-right">
            			<img src="img/1.jpg" />
            		</div>
            		<div class="case-left">
            			<span>产品应用</span>
            			<p>客户介绍多久客户介绍多久啊开发的撒法即刻客户介绍多久啊开发的撒法即刻客户介绍多久啊开发的撒法即刻客户介绍多久啊开发的撒法即刻客户介绍多久啊开发的撒法即刻啊开发的撒法即刻</p>
            		</div>
            	</div>-->

			</div>
			<!--
                	作者：offline
                	时间：2018-01-31
                	描述：联系我们
                -->
			<div class="footbar">
				<div class="address">
					<span>联系我们</span>
					<div class="address-p">
						<p>地址：宁波市镇海骆驼工业区兴业路2号</p>
						<p>郝经理 ：13805889283</p>
						<p>李经理 ：13805881657</p>
						<p>传真：0574-87581936</p>
					</div>

				</div>
				<div class="link">
					<span>相关链接</span>
					<div class="link-a">
						<a href="https://www.baidu.com" target="_blank">百度</a>
					</div>

				</div>
			</div>
		</div>
	</body>

</html>
<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use(['element', 'carousel'], function() {
		var element = layui.element,
			carousel = layui.carousel;

		BindDataList();

	});

	/**
	 * 数据列表
	 */
	function BindDataList() {
		layui.use('flow', function() {
			var flow = layui.flow;

			//流加载
			var pageSize = 15; //初始化默认显示15条
			ajaxget({
				url: 'api/NBtuodaPublic/GetApplicationList',
				success: function(data) {

					if(data == null) {
						return;
					}
					var pagetotal = Math.ceil(data.length / pageSize); //总页数

					flow.load({
						elem: '#DataList',
						isLazyimg: true, //开启图片懒加载
						done: function(page, next) {
							var lis = [];
							for(var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {
								//组合html
								if(index % 2 == 0) {
									//偶数
									lis.push('<div class="model-case white">');
									lis.push('<div class="case-left">');
									lis.push('<span>' + data[index].ContentData + '</span>');
									lis.push('<p>');
									lis.push(MyPublic.getFnDataellipsis(data[index].ContentData));
									lis.push('</p>');
									lis.push('</div>');
									lis.push('<div class="case-right">');
									lis.push('<img src="' + ApiURL + data[index].ImageUrl + '"/>');
									lis.push('</div>');
									lis.push('</div>');

								} else {
									//奇数
									lis.push('<div class="model-case gray">');
									lis.push('<div class="case-right">');
									lis.push('<img src="' + ApiURL + data[index].ImageUrl + '"/>');
									lis.push('</div>');
									lis.push('<div class="case-left">');
									lis.push('<span>' + data[index].ContentData + '</span>');
									lis.push('<p>');
									lis.push(MyPublic.getFnDataellipsis(data[index].ContentData));
									lis.push('</p>');
									lis.push('</div>');
									lis.push('</div>');
								}

							}

							next(lis.join(''), page < pagetotal);
						}
					});

				}
			})
		});
	}
</script>